<template>
  <div class="moreTechnic">
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="面试技巧"
      fixed
      placeholder
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 搜索模块 -->
    <div class="search">
      <van-search
        shape="round"
        placeholder="请输入搜索关键词"
        @click="$router.push({ path: '/mySearch' })"
        input-align="center"
        autofocus
      />
    </div>
    <!-- 面试技巧模块 -->
    <div class="technic">
      <van-row
        class="content"
        v-for="(item, index) in technicList"
        :key="item.id"
      >
        <van-col span="17"
          ><div class="left">
            <p
              @click="
                $router.push({ path: '/details', query: { id: item.id } })
              "
            >
              {{ item.title }}
            </p>
            <div class="bottom">
              <span class="time">{{ item.updated_at | technicTime }}</span>
              <span class="watch"
                ><van-icon name="browsing-history-o" />{{ item.read }}</span
              >
              <span
                :class="{ star: true, iconColor: star }"
                @click="onStar(index)"
                ><van-icon name="good-job-o" />{{ item.star }}</span
              >
            </div>
          </div></van-col
        >
        <van-col span="7"
          ><div class="right">
            <van-image
              width="100%"
              height="100%"
              :src="`http://119.91.151.46:1337${item.cover}`"
              radius="10%"
              fit="cover"
            /></div
        ></van-col>
      </van-row>
    </div>
    <div class="findBottom">
      ------没有更多了------
    </div>
  </div>
</template>

<script>
import { getTechnicListAPI } from '@/api'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  data () {
    return {
      technicList: [],
      // 点赞
      star: false,
      starList: []
    }
  },
  async created () {
    const res = await getTechnicListAPI()
    // console.log(res)
    this.technicList = res.data.data.list
  },
  methods: {
    // 点赞
    onStar (index) {
      this.starList.push(this.technicList[index])

      if (this.star === false) {
        this.star = true
        this.technicList[index].star += 1
      } else {
        this.star = false
        this.technicList[index].star -= 1
      }
    }
  },
  filters: {
    // 面试技巧模块发布时间过滤器
    technicTime: function (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.moreTechnic {
  .findBottom {
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #b4b4bd;
    font-size: 14px;
  }
  .van-icon {
    margin-right: 5px;
  }
  // 搜索模块
  .search {
    i.van-icon.van-icon-search {
      margin-left: 88px;
    }
    input.van-field__control.van-field__control--center {
      margin-left: -50px;
    }
  }
  // 面试技巧模块
  .technic {
    background-color: #fff;
    .content {
      display: flex;
      justify-content: space-between;
      margin: 20px 10px;
      height: 75px;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .time {
          display: inline-block;
          width: 130px;
        }
        .watch {
          display: inline-block;
          width: 80px;
        }
        p {
          margin-top: 0;
          font-size: 16px;
        }
        .bottom {
          font-size: 12px;
          margin-bottom: 4px;
          color: #b4b4bd;
        }
      }
      .right {
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-radius: 5px;
        margin-right: 10px;
      }
    }
  }
  //  点赞颜色
  .iconColor {
    color: red;
  }
}
</style>
